<template>
  <div class="custom-tabs">
    <div
      :class="{ 'custom-tabs_item-active': currentCustomIndex === index }"
      v-for="(item, index) in tabList"
      :key="item.value"
      @click="tabChange(index)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
const props = defineProps(["tabList", "modelValue"]);
const $emit = defineEmits(["update:modelValue", "tabChange"]);
const currentCustomIndex = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});
const tabChange = index => {
  currentCustomIndex.value = index;
  $emit("tabChange", index);
};
</script>
<style lang="scss" scoped>
.custom-tabs {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  line-height: 20px;

  div:nth-child(1) ~ div {
    margin-left: -1px;
  }

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 92px;
    height: 30px;
    background: #fff;
    border: 1px solid #dcdcdc;
    cursor: pointer;
  }

  .custom-tabs_item-active {
    border: 1px solid #007dff;
    color: #007dff;
    position: relative;
    z-index: 2;
  }
}
</style>
